<template>
  <div class="body">
  <div class="info_wrap">
    <div class="info_left">
      <div class="show_top">
        <img
          class="img_a"
          src="https://p2.music.126.net/cILV0xJmy5ROaZLXB-dGvQ==/109951166932436624.jpg?param=200y200"
        />
        <div class="show_info">
          <h3><span></span> 【正太音】经典人生故事</h3>
          <div class="p1">
            <img src="	https://p1.music.126.net/hmI-WxejEb7CTMMU-espWw==/109951167702744539.jpg?param=50y50"
            />
            <div>
              <span>三木的音乐电台</span>
              <img class="logo" src="https://s1.music.126.net/style/favicon.ico?v20180823" alt="">
            </div>
          </div>
          <div class="btn">
            <a class="orderBtn"> <i>订阅(255)</i></a>
            <a class="playBtn"><i>播放全部</i></a>
            <a class="shareBtn"><i>分享</i></a>
          </div>
          <p><span>情感</span>【正太音】经典人生故事</p>
        </div>
      </div>
      <div class="show_list">
        <div class="show_list_title">
          <h3>节目列表</h3>
          <span class="q1">共12期</span>
          <a class="up"></a>
          <a class="down"></a>
          <span class="q2">生成外链播放器</span>
        </div>
        <table class="show_list_body">
          <tr>
            <td class="col1">1<span class="play"></span></td>
            <td class="col2">广东——南方无摇滚？|中国摇滚地图</td>
            <td class="col3">播放：</td>
            <td class="col4">赞：</td>
            <td class="col5">2022-08-05</td>
            <td class="col6">15:20</td>
          </tr>
          <tr>
            <td class="col1">1<span class="play"></span></td>
            <td class="col2">广东——南方无摇滚？|中国摇滚地图</td>
            <td class="col3">播放：</td>
            <td class="col4">赞：</td>
            <td class="col5">2022-08-05</td>
            <td class="col6">15:20</td>
          </tr>
          <tr>
            <td class="col1">1<span class="play"></span></td>
            <td class="col2">广东——南方无摇滚？|中国摇滚地图</td>
            <td class="col3">播放：</td>
            <td class="col4">赞：</td>
            <td class="col5">2022-08-05</td>
            <td class="col6">15:20</td>
          </tr>
          <tr>
            <td class="col1">1<span class="play"></span></td>
            <td class="col2">广东——南方无摇滚？|中国摇滚地图</td>
            <td class="col3">播放：</td>
            <td class="col4">赞：</td>
            <td class="col5">2022-08-05</td>
            <td class="col6">15:20</td>
          </tr>
          <tr>
            <td class="col1">1<span class="play"></span></td>
            <td class="col2">广东——南方无摇滚？|中国摇滚地图</td>
            <td class="col3">播放：</td>
            <td class="col4">赞：</td>
            <td class="col5">2022-08-05</td>
            <td class="col6">15:20</td>
          </tr>
          <tr>
            <td class="col1">1<span class="play"></span></td>
            <td class="col2">广东——南方无摇滚？|中国摇滚地图</td>
            <td class="col3">播放：</td>
            <td class="col4">赞：</td>
            <td class="col5">2022-08-05</td>
            <td class="col6">15:20</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="info_right">
      <div class="belike">
        <h3>你可能也喜欢</h3>
        <ul>
          <li class="like_item">
          <a href="#"
            ><img
              src="https://p2.music.126.net/POwgpwBtxaK37DF70FWjqg==/109951167677013080.jpg?param=200y200"
              alt=""
          /></a>
          <div class="like_con">
            <a href="#"><span>九霄电台</span></a>
            <p>by 九霄电台</p>
          </div>
        </li>
         <li class="like_item">
          <a href="#"
            ><img
              src="https://p2.music.126.net/POwgpwBtxaK37DF70FWjqg==/109951167677013080.jpg?param=200y200"
              alt=""
          /></a>
          <div class="like_con">
            <a href="#"><span>九霄电台</span></a>
            <p>by 九霄电台</p>
          </div>
        </li>
        <li class="like_item">
          <a href="#"
            ><img
              src="https://p2.music.126.net/POwgpwBtxaK37DF70FWjqg==/109951167677013080.jpg?param=200y200"
              alt=""
          /></a>
          <div class="like_con">
            <a href="#"><span>九霄电台</span></a>
            <p>by 九霄电台</p>
          </div>
        </li>
        <li class="like_item">
          <a href="#"
            ><img
              src="https://p2.music.126.net/POwgpwBtxaK37DF70FWjqg==/109951167677013080.jpg?param=200y200"
              alt=""
          /></a>
          <div class="like_con">
            <a href="#"><span>九霄电台</span></a>
            <p>by 九霄电台</p>
          </div>
        </li>
        <li class="like_item">
          <a href="#"
            ><img
              src="https://p2.music.126.net/POwgpwBtxaK37DF70FWjqg==/109951167677013080.jpg?param=200y200"
              alt=""
          /></a>
          <div class="like_con">
            <a href="#"><span>九霄电台</span></a>
            <p>by 九霄电台</p>
          </div>
        </li>
        </ul>
      </div>
      <div class="downWay">
        <h3>网易云音乐多端下载</h3>
        <img src="./image/downWay.jpg" alt="">
      </div>
    </div>
  </div>
  <!-- <audio src=""></audio> -->
  </div>
</template>

<script>
import {reqOneRadioInfo} from "../../api/index"

export default {
  name: "RadioInfo",
  data(){
    return{
      radioInfo:{}
    }
  },
  async mounted(){
    const result=await reqOneRadioInfo(this.$route.params.id)
  }
};
</script>

<style lang="less" scoped>
.body{
  background-color:#f5f5f5 ;
.info_wrap {
  overflow: hidden;
  border-left: 2px solid rgb(211, 211, 211);
  border-right: 2px solid rgb(211, 211, 211);
  margin: 0 auto;
  width: 980px;
  // padding: 40px;
  background-color: #fff;
  position: relative;
  .info_left {
    // box-sizing:border-box;
    border-right: 2px solid rgb(237, 237, 237);
    width: 638px;
    float:left;
    padding: 47px 30px 40px 39px;
    .show_top {
      overflow: hidden;
      .img_a {
        float: left;
      }
      .show_info {
        // border: 1px solid blue;
        // float:left;
        margin-left: 230px;
        h3 {
          font-size: 20px;
          font-weight: 500;
          margin-bottom: 12px;
          span{
            width:55px;
              height:24px;
              float: left;
              background-image: url(https://s2.music.126.net/style/web2/img/icon.png?4a34334bdd24b3fcf20b5434f2ae77b7);
              background-position: 0 -1014px;
          }
        }
        div.p1 {
          // border: 1px solid black;
          margin-bottom: 20px;
          img {
            width: 35px;
            height: 35px;
            margin-right: 10px;
            vertical-align: top; //处理空白节点
          }
          .logo{
            width: 13px;
            height: 13px;
            margin: 10px 0 0 10px;
          }
          div{
            line-height: 35px;
            display: inline-block;
            color: rgb(12, 115, 194);
            vertical-align: top;
          }
        }
        div.btn{
          overflow: hidden;
          a{
          margin-right:6px;
          float: left;
          line-height:31px;
          background-image: url(https://s2.music.126.net/style/web2/img/button2.png?651cf07cbbec31a74cf05bda033d4fcf);
          }
          .orderBtn{
            width:93px;
            height:31px;
            background-position: 0 -2125px;
            i{
              color:rgb(255, 255, 255);
              margin-left:30px;
            }
          }
          .playBtn{
            width:85px;
            height:31px;
            margin-right:11px;
            background-image: url(https://s2.music.126.net/style/web2/img/button2.png?651cf07cbbec31a74cf05bda033d4fcf);
            background-position: 0 -2285px;
            i{
              margin-left:30px;
            }
          }
          .shareBtn{
            width:74px;
            height:42px;
            margin-right:11px;
            background-position: 0 -1225px;
            i{
              margin-left:30px;
            }
          }
        }
        p {
          color:#666666;
          span {
            padding:0 5px;
            color: #cc0000;
            border: 1px solid #cc0000;
          }
        }
      }
    }
    .show_list {
      .show_list_title {
        margin-top:20px;  
        height: 33px;
        overflow: hidden;
        border-bottom: 2px solid #c20c0c;
        h3 {
          float: left;
          font-size: 20px;
          font-weight: 500;
        }
        .q1 {
          color: rgb(153, 153, 153);
          float: left;
          margin: 9px 0 0 20px;
        }
        .q2 {
          float: right;
          margin: 5px 20px 0 0;
          color: rgb(12, 115, 206);
        }
        a {
          float: right;
          width: 29px;
          height: 25px;
          background-image: url(https://s2.music.126.net/style/web2/img/cnt_radio/cnt_radio.png?3ac89ae063e0446a30a4f130c1340c17);
        }
        .up {
          background-position: -40px 0px;
          width: 27px;
        }
        .down {
          background-position: 0 -30px;
        }
      }
      table {
        border: 1px solid rgb(217, 217, 217);
        tr {
          height: 55px;
          &:nth-child(even) {
            background-color: rgb(247, 247, 247);
          }
          .col1 {
            width: 62px;
            padding: 0 10px;
            color:rgb(153, 153, 153);
            .play{
              width:17px;
              height:17px;
              float: right;
              background-image: url(	https://s2.music.126.net/style/web2/img/table.png?753c6ae0932cff84dd3bd66aa5ea0984);
              background-position: 0 -103px;
            }
          }
          .col2 {
            width: 230px;
            padding-right: 10px;
          }
          .col3 {
            width: 55px;
            padding: 0 10px;
          }
          .col4 {
            width: 70px;
            padding: 0 10px;
          }
          .col5 {
            width: 70px;
            padding: 0 10px;
            color:rgb(153, 153, 153);
          }
          .col6 {
            width: 40px;
            padding: 0 10px;
            color:rgb(153, 153, 153);
          }
        }
      }
    }
  }
  .info_right{
    padding:20px 40px 40px 30px;
    // border:1px solid red;
    float:right;
    .belike{
      overflow: hidden;
      h3{
        font-weight:500px;
        font-size:12px;
        width:200px;
        height:23px;
        border-bottom:1px solid rgb(211, 211, 211);
        margin-bottom:20px;
      }
      ul{
        li{
          overflow: hidden;
          margin-bottom:15px;
        a{
          img{
            width:50px;
            height:50px;
            float:left;
          }
        }
        .like_con{
            float:left;
            margin-left:10px;
            a{
              font-size: 14px;
              color:#000000;
            }
            p{
              margin:10px 0;
            }
          }
      }
      }
    }
    .downWay{
      margin-top:25px;
      h3{
        font-weight:500px;
        font-size:12px;
        height:24px;
        border-bottom:1px solid rgb(211, 211, 211);
      }
      img{
        width:200px;
      }
    }
  }
}
}
</style>
